<template>
    <div class="regbox">
        <div class="regheader">
            <router-link to="/user" class="iconfont icon-jiantou3"></router-link>
        </div>
        <div class="reg-logo">
            <div>注</div>
            <div>册</div>
        </div>
        <div class="content">
            <mt-field  placeholder="请输入手机号" :state="usernameState" v-model="username"></mt-field>
            <mt-field  placeholder="包括至少1个字母，1个数字，1个特殊字符" :state="passwordState" v-model="password"></mt-field>
            <mt-field placeholder="验证码" v-model="code" :state="codedState" >
              <span @click="sendCode">{{ tip }}</span>
            </mt-field>
        </div>
        <mt-button :disabled="disabled" @click.native="register" :type="type" size="normal" class="reg-btn">立即注册</mt-button>
    </div>
</template>

<script>
import Vue from 'vue'
import Qs from 'qs'
import { Field, Button, Toast } from 'mint-ui'
Vue.use(Field, Button)
export default {
  data () {
    return {
      username: '18813007816',
      password: '123QWEasd...',
      code: '19860',
      // disabled: true,
      tip: '发送短信验证码',
      adminCode: '19860', // 后台发送过来的值
      timer: null,
      flag: 'yes' // 发送短信验证码是否可点  默认可点  不可点为no
    }
  },
  computed: {
    type () {
      if (this.usernameState === 'success' && this.passwordState === 'success' && this.codedState === 'success') {
        // this.disabled = false
        return 'primary'
      } else {
        // this.disabled = true
        return 'default'
      }
    },
    disabled () {
      if (this.type === 'primary') {
        return false
      } else {
        return true
      }
    },
    usernameState () {
      if (this.username === '') {
        return ''
      }
      if (/^1[345678]\d{9}$/.test(this.username)) {
        return 'success'
      } else {
        return 'error'
      }
    },
    passwordState () {
      if (this.password === '') {
        return ''
      }
      // 密码强度正则，最少6位，包括至少1个字母，1个数字，1个特殊字符
      if (/^.*(?=.{6,})(?=.*\d)(?=.*[A-z])(?=.*[!@#$%^&*?><_. ]).*$/.test(this.password)) {
        return 'success'
      } else {
        return 'error'
      }
    },
    codedState () {
      if (this.code === '') {
        return ''
      }
      if (this.code !== this.adminCode) {
        return 'error'
      } else {
        return 'success'
      }
    }
  },
  methods: {
    sendCode () {
      if (this.flag === 'yes') {
        let time = 5
        this.timer = setInterval(() => {
          this.flag = 'no'
          this.tip = `${time}s后继续发送`
          time--
          if (time === -1) {
            this.tip = '发送短信验证码'
            this.flag = 'yes'
            clearInterval(this.timer)
          }
        }, 1000)
        fetch(`/taotao/users/sendCode?tel=${this.username}`).then(res => res.json())
          .then(data => {
            console.log(data)
            if (data === 1) {
              // 用户名已注册
              Toast({
                message: '已注册',
                position: 'bottom',
                duration: 2000
              })
            } else if (data === 0) {
              Toast({
                message: '获取验证码失败',
                position: 'bottom',
                duration: 2000
              })
            } else {
              this.adminCode = data.code
            }
          })
      }
    },
    register () {
        let data = {
          username: this.username,
          password: this.password,
          yzm: this.code
        }
        console.log(data)
         axios({
        method: 'post',
        url: '/taotao/register/',
        data: Qs.stringify(data)
        })
         .then((res) => {
        console.log(res)
        const data = res.data
        console.log(data)
        if(data.status==='success'){
          Toast({
              message: '注册成功',
              position: 'bottom',
              duration: 2000
            })
          }else{
            Toast({
              message: '注册失败',
              position: 'bottom',
              duration: 2000
            })
          }
        })
        .catch(function (error) {
          console.log(error)
        }) 
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.regbox {
    @include rect(100%, 100%);
    background: url(./../assets/bg1.png) no-repeat;
    background-size:100% 100%;
    background-attachment:fixed;
    // color: #fff
}
.regheader {
   @include rect(100%, 0.5rem);
   .icon-jiantou3 {
        @include rect(45%, 0.5rem);
        line-height: 0.5rem;
        float: left;
        color: #fff;
        @include margin(0 0 0 0.1rem);
        line-height: 0.5rem
    }
}
//logo
.reg-logo {
    @include rect(1.5rem, 0.6rem);
    @include margin(0.2rem auto);
    color: #fff;
    div {
        @include rect(0.6rem, 0.6rem);
        float: left;
        font-size: 0.3rem;
        line-height: 0.6rem;
        text-align: center;
    }
    div:last-child {
        float: right
    }
}
//按钮
.reg-btn {
    @include rect(50%, 0.5rem);
    @include margin(0.3rem 25%);
    border-radius: 0.3rem;
    // background: rgba(255,255,255,0.5);
    color: #000;
}
// //登录框
// .reg-content {
//     @include rect(100%, 40%);
//     line-height: 0.5rem;
//     font-size: 0.2rem;
//     text-align: center;
//     i {
//        @include rect(0.55rem, 0.55rem);
//        float: left;
//        line-height: 0.52rem;
//        font-size: 0.25rem
//     }
//     .reg-ipt {
//         @include rect(80%, 0.55rem);
//         @include margin(0.2rem auto);
//         border-radius: 0.3rem;
//         border: 0.02rem solid #fff;
//         input {
//             @include rect(80%, 0.55rem);
//             background: none;
//             border: 0;
//         }
//         //placehoder 颜色改变
//         input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
//             color:#fff
//         }
//     }
//     //验证码
//     #log-code-ipt {
//         @include rect(50%, 0.5rem);
//         float: left;
//         margin-left: 0.15rem
//     }
//     .tel-code {
//         @include rect(40%, 0.51rem);
//         background: rgba(255,255,255,0.5);
//         float: right;
//         color: #000;
//         border-radius: 0 0.3rem 0.3rem 0;
//         font-size: 0.16rem
//     }
// }
</style>
